﻿@page "/components/card"

<Pager Title="Card" Description="Provide a flexible and extensible content container"
Indicates="@(new[]{"Example","Body","Titles, text, and links","Images","List groups","Kitchen sink"
,"Header and footer","Using grid markup","Image caps","Image overlay","Horizontal","Background colors","Border colors","Card groups"
})"
>
		<Demo Title="Example">
		<Description>
			A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
		</Description>
		<Run>
			<Card style="width:18rem">
				<CardImage Placement="UpDownPlacement.Top" src="/img/demo-bg-img.jfif"/>
				<CardBody>
					<CardText TagName="h4"> Card Title</CardText>
					<CardText>
						Some quick example text to build on the card title and make up the bulk of the card's content.
					</CardText>
					<Button Color="Color.Primary">Go somewhere</Button>
				</CardBody>
			</Card>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Card style=""width:18rem"">
	<CardImage Placement=""UpDownPlacement.Top"" src=""...""/>
	<CardBody>
		<CardText TagName=""h4""> Card Title</CardText>
		<CardText>
			Some quick example text to build on the card title and make up the bulk of the card's content.
		</CardText>
		<Button Color=""Color.Primary"">Go somewhere</Button>
	</CardBody>
</Card>
```
			")
		</Code>
	</Demo>
	<h4 class="mt-3">Content types</h4>
          <small>Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.</small>
		<Demo Title="Body">
		<Description>
			The building block of a card is the <code>CardBody</code>. Use it whenever you need a padded section within a card.
		</Description>
		<Run>
			<Card>
				<CardBody>
					This is some text within a card body.
				</CardBody>
			</Card>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Card>
	<CardBody>
		This is some text within a card body.
	</CardBody>
</Card>
```
			")
		</Code>
	</Demo>
		<Demo Title="Titles, text, and links">
		<Description>
			Card titles are used by adding <code>CardTitle</code> component.<br/>
			In the same way, links are added and placed next to each other by adding <code>CardLink</code> component.<br/>
			Both are dynamic component and you can set <code>TagName</code> to render the html element that you want.
		</Description>
		<Run>
			<Card style="width:18rem">
				<CardBody>
					<CardTitle TagName="h2">Card Title</CardTitle>
					<CardTitle TagName="h6" Subtitle CssClass="Css.Text(Text.Muted).Margin(SpaceNum.Two2,SpaceSide.Bottom)">Card subtitle</CardTitle>
					<CardText>
						Some quick example text to build on the card title and make up the bulk of the card's content.
					</CardText>
					<CardLink href="#">Card link</CardLink>
					<CardLink href="#">Another link</CardLink>
				</CardBody>
			</Card>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Card style=""width:18rem"">
	<CardBody>
		<CardTitle TagName=""h2"">Card Title</CardTitle>
		<CardTitle TagName=""h6"" Subtitle CssClass=""Css.Text(Text.Muted).Margin(SpaceNum.Two2,SpaceSide.Bottom)"">Card subtitle</CardTitle>
		<CardText>
			Some quick example text to build on the card title and make up the bulk of the card's content.
		</CardText>
		<CardLink href=""#"">Card link</CardLink>
		<CardLink href=""#"">Another link</CardLink>
	</CardBody>
</Card>
```
			")
		</Code>
	</Demo>
		<Demo Title="Images">
		<Description>
			Place the image on the top should set <code>Placement="UpDownPlacement.Top"</code> for <code>CardImage</code> component.
		</Description>
		<Run>
			<Card style="width:18rem">
				<CardImage Placement="UpDownPlacement.Top" src="img/demo-bg-img.jfif"/>
				<CardBody>
					<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
				</CardBody>
			</Card>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Card style=""width:18rem"">
	<CardImage Placement=""UpDownPlacement.Top"" src=""img/demo-bg-img.jfif""/>
	<CardBody>
		<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
	</CardBody>
</Card>
```
			")
		</Code>
	</Demo>	
	<Demo Title="List groups">
		<Description>
			Create lists of content in a card with a flush list group.
		</Description>
		<Run>
			<Card style="width:18rem">
				<ListGroup Flush>
					<ListGroupItem>An item</ListGroupItem>
					<ListGroupItem>A second item</ListGroupItem>
					<ListGroupItem>A third item</ListGroupItem>
				</ListGroup>
			</Card>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Card style=""width:18rem"">
	<ListGroup Flush>
		<ListGroupItem>An item</ListGroupItem>
		<ListGroupItem>A second item</ListGroupItem>
		<ListGroupItem>A third item</ListGroupItem>
	</ListGroup>
</Card>
```
			")
		</Code>
	</Demo>
	<Demo>
		<Run>
			<Card style="width:18rem">
				<CardHeader>
					Featured
				</CardHeader>
					<ListGroup Flush>
						<ListGroupItem>An item</ListGroupItem>
						<ListGroupItem>A second item</ListGroupItem>
						<ListGroupItem>A third item</ListGroupItem>
					</ListGroup>
			</Card>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Card style=""width:18rem"">
	<CardHeader>
		Featured
	</CardHeader>
	<ListGroup Flush>
		<ListGroupItem>An item</ListGroupItem>
		<ListGroupItem>A second item</ListGroupItem>
		<ListGroupItem>A third item</ListGroupItem>
	</ListGroup>
</Card>
```
			")
		</Code>
	</Demo>
	<Demo>
		<Run>
			<Card style="width:18rem">
				<ListGroup Flush>
					<ListGroupItem>An item</ListGroupItem>
					<ListGroupItem>A second item</ListGroupItem>
					<ListGroupItem>A third item</ListGroupItem>
				</ListGroup>
				<CardFooter>
					Card Footer
				</CardFooter>
			</Card>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Card style=""width:18rem"">
	<ListGroup Flush>
		<ListGroupItem>An item</ListGroupItem>
		<ListGroupItem>A second item</ListGroupItem>
		<ListGroupItem>A third item</ListGroupItem>
	</ListGroup>
	<CardFooter>
		Card Footer
	</CardFooter>
</Card>
```
			")
		</Code>
	</Demo>
	<Demo Title="Kitchen sink">
		<Description>
			Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
		</Description>
		<Run>
			<Card style="width:18rem">
				<CardImage Placement="UpDownPlacement.Top" src="/img/demo-bg-img.jfif"/>
				<CardBody>
					<CardTitle><h5>Card Title</h5></CardTitle>
					<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
				</CardBody>
				<ListGroup Flush>
					<ListGroupItem>An item</ListGroupItem>
					<ListGroupItem>A second item</ListGroupItem>
					<ListGroupItem>A third item</ListGroupItem>
				</ListGroup>
				<CardBody>
					<CardLink href="#">Card link</CardLink>
					<CardLink href="#">Card link</CardLink>
				</CardBody>
			</Card>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Card style=""width:18rem"">
	<CardImage Placement=""UpDownPlacement.Top"" src=""...""/>
	<CardBody>
		<CardTitle><h5>Card Title</h5></CardTitle>
		<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
	</CardBody>
	<ListGroup Flush>
		<ListGroupItem>An item</ListGroupItem>
		<ListGroupItem>A second item</ListGroupItem>
		<ListGroupItem>A third item</ListGroupItem>
	</ListGroup>
	<CardBody>
		<CardLink href=""#"">Card link</CardLink>
		<CardLink href=""#"">Card link</CardLink>
	</CardBody>
</Card>
```
			")
		</Code>
	</Demo>
		<Demo Title="Header and footer">
		<Description>
			Add an optional header and/or footer within a card.
		</Description>
		<Run>
			<Card CssClass="Css.Text(Text.Center)">
				<CardHeader>Header</CardHeader>
				<CardBody>
					<CardTitle><h2>Card title</h2></CardTitle>
					<CardText>
						With supporting text below as a natural lead-in to additional content.
					</CardText>
					<CardLink href="#">Card link</CardLink>
					<Button Color="Color.Warning">Go Home</Button>
				</CardBody>
				<CardFooter CssClass="Css.Text(Text.Muted)">Footer</CardFooter>
			</Card>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Card CssClass=""Css.Text(Text.Center)"">
	<CardHeader>Header</CardHeader>
	<CardBody>
		<CardTitle><h2>Card title</h2></CardTitle>
		<CardText>
			With supporting text below as a natural lead-in to additional content.
		</CardText>
		<CardLink href=""#"">Card link</CardLink>
		<Button Color=""Color.Warning"">Go Home</Button>
	</CardBody>
	<CardFooter CssClass=""Css.Text(Text.Muted)"">Footer</CardFooter>
</Card>
```
			")
		</Code>
	</Demo>
		<Demo Title="Using grid markup">
		<Description>
			Using the grid, wrap cards in columns and rows as needed.
		</Description>
		<Run>
			<Row>
				<Column Col="Col.Is6.OnSM">
					<Card>
						<CardImage Placement="UpDownPlacement.Top" src="/img/demo-bg-img.jfif"/>
						<CardBody>
							<CardTitle TagName="h2">Card Title</CardTitle>
							<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
							<Button Color="Color.Primary">Go Somewhere</Button>
						</CardBody>
					</Card>
				</Column>
				<Column Col="Col.Is6.OnSM">
					<Card>
						<CardImage Placement="UpDownPlacement.Top" src="/img/demo-bg-img.jfif"/>
						<CardBody>
							<CardTitle TagName="h2">Card Title</CardTitle>
							<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
							<Button Color="Color.Primary">Go Somewhere</Button>
						</CardBody>
					</Card>
				</Column>
			</Row>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Row>
	<Column Col=""Col.Is6.OnSM"">
		<Card>
			<CardImage Placement=""UpDownPlacement.Top"" src=""/img/demo-bg-img.jfif""/>
			<CardBody>
				<CardTitle TagName=""h2"">Card Title</CardTitle>
				<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
				<Button Color=""Color.Primary"">Go Somewhere</Button>
			</CardBody>
		</Card>
	</Column>
	<Column Col=""Col.Is6.OnSM"">
		<Card>
			<CardImage Placement=""UpDownPlacement.Top"" src=""/img/demo-bg-img.jfif""/>
			<CardBody>
				<CardTitle TagName=""h2"">Card Title</CardTitle>
				<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
				<Button Color=""Color.Primary"">Go Somewhere</Button>
			</CardBody>
		</Card>
	</Column>
</Row>
```
			")
		</Code>
	</Demo>
		<Demo Title="Image caps">
		<Description>
			Similar to headers and footers, cards can include top and bottom <code>CardImage</code> to set parameter <code>Placement</code>.
		</Description>
		<Run>
			
			<Card>
				<CardImage src="/img/demo-bg-img.jfif" Placement="UpDownPlacement.Top" />
				<CardBody>
					<CardTitle TagName="h2">Card Title</CardTitle>
					<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
					<CardText>Last updated 3 mins ago</CardText>
				</CardBody>
			</Card>
			<br />
			<Card>
				<CardBody>
					<CardTitle TagName="h2">Card Title</CardTitle>
					<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
					<CardText>Last updated 3 mins ago</CardText>
				</CardBody>
				<CardImage src="/img/demo-bg-img.jfif" Placement="UpDownPlacement.Bottom" />
			</Card>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Card>
	<CardImage src=""/img/demo-bg-img.jfif"" Placement=""UpDownPlacement.Top"" />
	<CardBody>
		<CardTitle TagName=""h2"">Card Title</CardTitle>
		<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
		<CardText>Last updated 3 mins ago</CardText>
	</CardBody>
</Card>

<Card>
	<CardImage src=""/img/demo-bg-img.jfif"" Placement=""UpDownPlacement.Bottom"" />
	<CardBody>
		<CardTitle TagName=""h2"">Card Title</CardTitle>
		<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
		<CardText>Last updated 3 mins ago</CardText>
	</CardBody>
</Card>
```
			")
		</Code>
	</Demo>
		<Demo Title="Image overlay">
		<Description>
			Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.
		</Description>
		<Run>
			<Card BgColor="BgColor.Dark">
				<CardImage src="/img/demo-bg-img.jfif"/>
				<CardImageOverlay>
					<CardTitle TagName="h2">Card Title</CardTitle>
					<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
					<CardText>Last updated 3 mins ago</CardText>
				</CardImageOverlay>
			</Card>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Card BgColor=""BgColor.Dark"">
	<CardImage src=""/img/demo-bg-img.jfif""/>
	<CardImageOverlay>
		<CardTitle TagName=""h2"">Card Title</CardTitle>
		<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
		<CardText>Last updated 3 mins ago</CardText>
	</CardImageOverlay>
</Card>
```
			")
		</Code>
	</Demo>
		<Demo Title="Horizontal">
		<Description>
			Using a combination of grid, cards can be made horizontal in a mobile-friendly and responsive way. 
		</Description>
		<Run>
			<Card Margin="Margin.Is3" style="max-width:540px">
				<Row Gutter="Gutter.Is0">
					<Column Col="Col.Is4">
						<Image src="/img/demo-bg-img.jfif"/>
					</Column>
					<Column Col="Col.Is8">
						<CardBody>
							<CardTitle TagName="h5">Card Title</CardTitle>
							<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
							<CardText>Last updated 3 mins ago</CardText>
						</CardBody>
					</Column>
				</Row>
			</Card>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Card Margin=""Margin.Is3"" style=""max-width:540px"">
	<Row Gutter=""Gutter.Is0"">
		<Column Col=""Col.Is4"">
			<Image src=""/img/demo-bg-img.jfif""/>
		</Column>
		<Column Col=""Col.Is8"">
			<CardBody>
				<CardTitle TagName=""h2"">Card Title</CardTitle>
				<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
				<CardText>Last updated 3 mins ago</CardText>
			</CardBody>
		</Column>
	</Row>
</Card>
```
			")
		</Code>
	</Demo>
	<Demo Title="Background colors">
		<Description>
			Set <code>BgColor</code> to change the appearance of a card.
		</Description>
		<Run>
			<Card BgColor="BgColor.Primary" style="width:14rem">
				<CardBody>
					<CardTitle TagName="h5">Card Title</CardTitle>
					<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
					<CardText>Last updated 3 mins ago</CardText>
				</CardBody>
			</Card>
			<br />
			
			<Card BgColor="BgColor.Secondary" style="width:14rem">
				<CardBody>
					<CardTitle TagName="h5">Card Title</CardTitle>
					<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
					<CardText>Last updated 3 mins ago</CardText>
				</CardBody>
			</Card>
			<br />
			
			<Card BgColor="BgColor.Info" style="width:14rem">
				<CardBody>
					<CardTitle TagName="h5">Card Title</CardTitle>
					<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
					<CardText>Last updated 3 mins ago</CardText>
				</CardBody>
			</Card>
			<br />
			
			<Card BgColor="BgColor.Success" style="width:14rem">
				<CardBody>
					<CardTitle TagName="h5">Card Title</CardTitle>
					<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
					<CardText>Last updated 3 mins ago</CardText>
				</CardBody>
			</Card>
			<br />
			
			<Card BgColor="BgColor.Warning" style="width:14rem">
				<CardBody>
					<CardTitle TagName="h5">Card Title</CardTitle>
					<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
					<CardText>Last updated 3 mins ago</CardText>
				</CardBody>
			</Card>
			<br />
			
			<Card BgColor="BgColor.Danger" style="width:14rem">
				<CardBody>
					<CardTitle TagName="h5">Card Title</CardTitle>
					<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
					<CardText>Last updated 3 mins ago</CardText>
				</CardBody>
			</Card>
			<br />
			
			<Card BgColor="BgColor.Light" style="width:14rem">
				<CardBody>
					<CardTitle TagName="h5">Card Title</CardTitle>
					<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
					<CardText>Last updated 3 mins ago</CardText>
				</CardBody>
			</Card>
			<br />
			
			<Card BgColor="BgColor.Dark" style="width:14rem">
				<CardBody>
					<CardTitle TagName="h5">Card Title</CardTitle>
					<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
					<CardText>Last updated 3 mins ago</CardText>
				</CardBody>
			</Card>
			<br />
		</Run>
		<Code>
			@MD.Write(@"
```html
<Card BgColor=""BgColor.Primary"">
...
</Card>

<Card BgColor=""BgColor.Secondary"">
...
</Card>

<Card BgColor=""BgColor.Info"">
...
</Card>

<Card BgColor=""BgColor.Success"">
...
</Card>

<Card BgColor=""BgColor.Warning"">
...
</Card>

<Card BgColor=""BgColor.Danger"">
...
</Card>

<Card BgColor=""BgColor.Light"">
...
</Card>

<Card BgColor=""BgColor.Dark"">
...
</Card>
```
			")
		</Code>
	</Demo>
	<Demo Title="Border colors">
		<Description>
			Set <code>BorderColor</code> to change the appearance of a card border. 
			You can set <code>TextColor</code> on parent <code>Card</code> or a subset of the card’s contents.
		</Description>
		<Run>
			<Card BorderColor="Color.Primary" style="width:14rem">
				<CardBody>
					<CardTitle TagName="h5">Card Title</CardTitle>
					<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
					<CardText>Last updated 3 mins ago</CardText>
				</CardBody>
			</Card>
			<br />
			
			<Card BorderColor="Color.Secondary" style="width:14rem">
				<CardBody>
					<CardTitle TagName="h5">Card Title</CardTitle>
					<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
					<CardText>Last updated 3 mins ago</CardText>
				</CardBody>
			</Card>
			<br />
			
			<Card BorderColor="Color.Info" style="width:14rem">
				<CardBody>
					<CardTitle TagName="h5">Card Title</CardTitle>
					<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
					<CardText>Last updated 3 mins ago</CardText>
				</CardBody>
			</Card>
			<br />
			
			<Card BorderColor="Color.Success" style="width:14rem">
				<CardBody TextColor="TextColor.Success">
					<CardTitle TagName="h5">Card Title</CardTitle>
					<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
					<CardText>Last updated 3 mins ago</CardText>
				</CardBody>
			</Card>
			<br />
			
			<Card BorderColor="Color.Warning" style="width:14rem">
				<CardBody>
					<CardTitle TagName="h5">Card Title</CardTitle>
					<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
					<CardText>Last updated 3 mins ago</CardText>
				</CardBody>
			</Card>
			<br />
			
			<Card BorderColor="Color.Danger" style="width:14rem">
				<CardBody>
					<CardTitle TagName="h5">Card Title</CardTitle>
					<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
					<CardText>Last updated 3 mins ago</CardText>
				</CardBody>
			</Card>
			<br />
			
			<Card BorderColor="Color.Light" style="width:14rem">
				<CardBody TextColor="TextColor.Danger">
					<CardTitle TagName="h5">Card Title</CardTitle>
					<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
					<CardText>Last updated 3 mins ago</CardText>
				</CardBody>
			</Card>
			<br />
			
			<Card BorderColor="Color.Dark" style="width:14rem">
				<CardBody>
					<CardTitle TagName="h5">Card Title</CardTitle>
					<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
					<CardText>Last updated 3 mins ago</CardText>
				</CardBody>
			</Card>
			<br />
		</Run>
		<Code>
			@MD.Write(@"
```html
<Card BorderColor=""Color.Primary"">
	<CardBody TextColor=""TextColor.Primary"">
		...
	</CardBody>
</Card>
```
			")
		</Code>
	</Demo>
		<Demo Title="Card groups">
		<Description>
			Use card groups to render cards as a single, attached element with equal width and height columns.
		</Description>
		<Run>
			<CardGroup>
				<Card>
					<CardImage src="/img/demo-bg-img.jfif" Placement="UpDownPlacement.Top" />
					<CardBody>
						<CardTitle TagName="h5">Card Title</CardTitle>
						<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
						<CardText>Last updated 3 mins ago</CardText>
					</CardBody>
				</Card>
			
				<Card>
					<CardImage src="/img/demo-bg-img.jfif" Placement="UpDownPlacement.Top" />
					<CardBody>
						<CardTitle TagName="h5">Card Title</CardTitle>
						<CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
						<CardText>Last updated 3 mins ago</CardText>
					</CardBody>
				</Card>
			
				<Card>
					<CardImage src="/img/demo-bg-img.jfif" Placement="UpDownPlacement.Top" />
					<CardBody>
						<CardTitle TagName="h5">Card Title</CardTitle>
						<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</CardText>
						<CardText>Last updated 3 mins ago</CardText>
					</CardBody>
				</Card>
			</CardGroup>
		</Run>
		<Code>
			@MD.Write(@"
```html
<CardGroup>
	<Card>
		<CardImage src=""/img/demo-bg-img.jfif"" Placement=""UpDownPlacement.Top"" />
		<CardBody>
			<CardTitle TagName=""h5"">Card Title</CardTitle>
			<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
			<CardText>Last updated 3 mins ago</CardText>
		</CardBody>
	</Card>			
	<Card>
		<CardImage src=""/img/demo-bg-img.jfif"" Placement=""UpDownPlacement.Top"" />
		<CardBody>
			<CardTitle TagName=""h5"">Card Title</CardTitle>
			<CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
			<CardText>Last updated 3 mins ago</CardText>
		</CardBody>
	</Card>			
	<Card>
		<CardImage src=""/img/demo-bg-img.jfif"" Placement=""UpDownPlacement.Top"" />
		<CardBody>
			<CardTitle TagName=""h5"">Card Title</CardTitle>
			<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</CardText>
			<CardText>Last updated 3 mins ago</CardText>
		</CardBody>
	</Card>
</CardGroup>
```
			")
		</Code>
	</Demo>
		<Demo Title="">
		<Description>
			When using card groups with footers, their content will automatically line up.
		</Description>
		<Run>
			
			<CardGroup>
				<Card>
					<CardImage src="/img/demo-bg-img.jfif" Placement="UpDownPlacement.Top" />
					<CardBody>
						<CardTitle TagName="h5">Card Title</CardTitle>
						<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
					</CardBody>
					<CardFooter>
						Last updated 3 mins ago
					</CardFooter>
				</Card>
			
				<Card>
					<CardImage src="/img/demo-bg-img.jfif" Placement="UpDownPlacement.Top" />
					<CardBody>
						<CardTitle TagName="h5">Card Title</CardTitle>
						<CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
					</CardBody>
					<CardFooter>
						Last updated 3 mins ago
					</CardFooter>
				</Card>
			
				<Card>
					<CardImage src="/img/demo-bg-img.jfif" Placement="UpDownPlacement.Top" />
					<CardBody>
						<CardTitle TagName="h5">Card Title</CardTitle>
						<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</CardText>
					</CardBody>
					<CardFooter>
						Last updated 3 mins ago
					</CardFooter>
				</Card>
			</CardGroup>
		</Run>
		<Code>
			@MD.Write(@"
```html
<CardGroup>
<Card>
	<CardImage src=""/img/demo-bg-img.jfif"" Placement=""UpDownPlacement.Top"" />
	<CardBody>
		<CardTitle TagName=""h5"">Card Title</CardTitle>
		<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
	</CardBody>
	<CardFooter>
		Last updated 3 mins ago
	</CardFooter>
</Card>
			
<Card>
	<CardImage src=""/img/demo-bg-img.jfif"" Placement=""UpDownPlacement.Top"" />
	<CardBody>
		<CardTitle TagName=""h5"">Card Title</CardTitle>
		<CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
	</CardBody>
	<CardFooter>
		Last updated 3 mins ago
	</CardFooter>
</Card>
			
<Card>
	<CardImage src=""/img/demo-bg-img.jfif"" Placement=""UpDownPlacement.Top"" />
	<CardBody>
		<CardTitle TagName=""h5"">Card Title</CardTitle>
		<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</CardText>
	</CardBody>
	<CardFooter>
		Last updated 3 mins ago
	</CardFooter>
</Card>
</CardGroup>
```
			")
		</Code>
	</Demo>
</Pager>